<template>
    <div class="nav">

<el-row class="tac">
  <el-col :span="24">
    <el-menu default-active="1" class="el-menu-vertical-demo" theme="dark" unique-opened="true">
      <el-submenu v-bind:index="item.listname1" v-for="(item,index) in items">
        <template slot="title">{{item.listname1}}</template>
<el-menu-item v-bind:index="list.name" v-for="(list,index1) in item.lists">
    <router-link v-bind:to="'/' + list.add">{{list.name}}</router-link>
</el-menu-item>
</el-submenu>
</el-menu>
</el-col>
</el-row>
</div>
</template>
<script>
    export default {
        data() {
            return {
                items: [{
                    listname1: '成本管理',
                    lists: [{
                        name: '成本分析',
                        add: 'costanalyse'
                    }, {
                        name: '成本月报',
                        add: 'costmonthly'
                    }]
                }],

            }
        },
        methods: {
            giveActive(index) {
                // alert(this.items[index].style)
                this.items[index].style = !this.items[index].style
                    // alert(this.items[index].style)
            }
        }
    }
</script>
<style>
    .nav {
        position: fixed;
        left: 0;
        bottom: 0;
        top: 60px;
        background-color: #222d32;
        overflow-y: auto;
        z-index: 15;
        color: #fff;
        width: 200px;
    }
    
    .nav a {
        width: 200px;
        color: #b8c7ce
    }
</style>